<template>
    <div class="container">
        <nav class="navbar navbar-dark bg-primary">
            <a class="navbar-brand left pl-5" href="#">添加文章</a>
            <a class="navbar-brand left pl-5" href="#" @click="fanhui">返回文章</a>
        </nav>
        <div class="hero-unit">
            <h1>{{list.title}}</h1>
            <img :src="list.avatar" alt="">
            <p>
                {{list.description}}
            </p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent,ref,reactive } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
export default defineComponent({
    setup () {
        const router = useRouter();
        const store = useStore()
        let list = reactive({})
        // 将传过来的 id 赋值
        const sum = ref(router.currentRoute.value.query.ans)
        console.log(sum.value)
        // 返回显示文章的路由
        const fanhui = () => {
            router.push('/')
        }
        // 找到了
        // console.log(router.currentRoute.value.query)
        // console.log(store.state.contentlist.length)
        // 遍历 数组，找到id
        for(var i = 0;i < store.state.contentlist.length;i++){
            console.log(store.state.contentlist.length)
            if(sum.value === (i+1).toString()){
                list = store.state.contentlist[i]
            }
        }
        return {fanhui,list}
    }
})
</script>

<style scoped>
    .left{
        padding-left: 30px;
    }
    img{
        width: 100px;
        height: 100px;
    }
</style>
